class Paginator {
  // domRoot=DOM根元素（所谓渲染就是给根元素刷一遍innerHTML）
  // callback=翻页的回调函数 n=>mt.turnToPage(n)
  /* 
    {
        totalPages:Math.ceil(students.length/10),//124
        currentPage:page//一开始高亮第5页
    }
    */
  constructor(domRoot, callback, conf) {
    this.domRoot = domRoot;

    // 将翻页回调函数绑定在分页器实例身上
    this.callback = callback;

    // 用户自定义配置
    this.conf = conf;

    let { totalPages, currentPage } = conf;
    this.totalPages = totalPages;

    // 记录当前页
    this.currentPage = currentPage;

    /* 要操作的元素:最终废弃了——最后使用了事件委托（节约内存+便于管理+防止内存泄露） */
    // 所有的页码标签
    // this.pagers = [];
    // this.btnFirst = null;
    // this.btnLast = null;
    // this.btnPrev = null;
    // this.btnNext = null;
    // this.ipPage = null;
    // this.btnGo = null;

    /* 将分页器的视图渲染到this.domRoot */
    this.render();

    // 添加事件监听器
    this.initListeners();
  }

  render() {
    this.domRoot.style =
      "display: flex; justify-content: center; align-items: center";

    this.domRoot.innerHTML = `  
    <!-- 首页按钮 -->
        <div
          style="border: 1px solid rgb(51, 51, 51); padding: 0px 5px; margin: 0px 5px"
          id="btnFirst"
        >first</div>
      
        <!-- 上一页 -->
        <div
          style="border: 1px solid rgb(51, 51, 51); padding: 0px 5px; margin: 0px 5px"
          id="btnPrev"
        >prev</div>
      
        <!-- 页码 -->
        <div
          style="display: flex; justify-content: center; align-items: center"
          class="pagers"
        >${this.getPagersHtml()}</div>
      
        <!-- 下一页 -->
        <div
          style="border: 1px solid rgb(51, 51, 51); padding: 0px 5px; margin: 0px 5px"
          id="btnNext"
        >next</div>
      
        <!-- 末页 -->
        <div
          style="border: 1px solid rgb(51, 51, 51); padding: 0px 5px; margin: 0px 5px"
          id="btnLast"
        >last</div>
      
        <!-- 用户输入页码 -->
        <input
          id="ipPage"
          type="number"
          style="outline: none; width: 50px; height: 20px"
        />
      
        <!-- 跳转用户输入的页码 -->
        <button
          id="btnGo"
          style="outline: none; width: 30px; height: 24px; margin-left: 5px"
        >go</button>`;

    /* 找出元素 */
    this.pagers = Array.from(this.domRoot.querySelectorAll(".pager"));
    this.btnFirst = this.domRoot.querySelector("#btnFirst");
    this.btnLast = this.domRoot.querySelector("#btnLast");
    this.btnPrev = this.domRoot.querySelector("#btnPrev");
    this.btnNext = this.domRoot.querySelector("#btnNext");
    this.ipPage = this.domRoot.querySelector("#ipPage");
    this.btnGo = this.domRoot.querySelector("#btnGo");
  }

  /* 获取页码形成的HTML结构 */
  getPagersHtml() {
    let pagersHtml = "";

    /* 封一个临时函数 */
    // [ [1,5],[],[120,124] ]
    // [ [1,3],[],[6,10],[],[122,124] ]
    let fn = (arr) => {
      arr.forEach(([start, end]) => {
        if (start && end) {
          for (let i = start; i <= end; i++) {
            pagersHtml += `<p style="border: 1px solid rgb(51, 51, 51); margin: 0px 5px; padding: 0px 5px"
                        class="pager ${
                          i === this.currentPage ? "current" : ""
                        }">${i}</p>`;
          }
        } else {
          pagersHtml += "...";
        }
      });
    };

    /* 当前页位于边缘[1,5],[120,124] */

    // [ [1,5],[],[120,124] ]
    if (this.currentPage <= 5 || this.currentPage >= this.totalPages - 4) {
      //   for (var i = 1; i <= 5; i++) {
      //     pagersHtml += `<p style="border: 1px solid rgb(51, 51, 51); margin: 0px 5px; padding: 0px 5px"
      //             class="pager ${
      //               i === this.currentPage ? "current" : ""
      //             }">${i}</p>`;
      //   }
      //   pagersHtml += "...";
      //   for (var i = this.totalPages - 4; i <= this.totalPages; i++) {
      //     pagersHtml += `<p style="border: 1px solid rgb(51, 51, 51); margin: 0px 5px; padding: 0px 5px"
      //             class="pager ${
      //               i === this.currentPage ? "current" : ""
      //             }">${i}</p>`;
      //   }
      fn.call(this, [[1, 5], [], [this.totalPages - 4, this.totalPages]]);
    }

    // [ [1,3],[],[6,10],[],[122,124] ]
    else {
      /* 当前页码位于中间地带 */
      //   for (var i = 1; i <= 3; i++) {
      //     pagersHtml += `<p style="border: 1px solid rgb(51, 51, 51); margin: 0px 5px; padding: 0px 5px"
      //                 class="pager ${
      //                   i === this.currentPage ? "current" : ""
      //                 }">${i}</p>`;
      //   }

      //   pagersHtml += "...";

      //   for (var i = this.currentPage - 2; i <= this.currentPage + 2; i++) {
      //     pagersHtml += `<p style="border: 1px solid rgb(51, 51, 51); margin: 0px 5px; padding: 0px 5px"
      //                 class="pager ${
      //                   i === this.currentPage ? "current" : ""
      //                 }">${i}</p>`;
      //   }

      //   pagersHtml += "...";

      //   for (var i = this.totalPages - 2; i <= this.totalPages; i++) {
      //     pagersHtml += `<p style="border: 1px solid rgb(51, 51, 51); margin: 0px 5px; padding: 0px 5px"
      //                 class="pager ${
      //                   i === this.currentPage ? "current" : ""
      //                 }">${i}</p>`;
      //   }
      fn.call(this, [
        [1, 3],
        [],
        [this.currentPage - 2, this.currentPage + 2],
        [],
        [this.totalPages - 2, this.totalPages],
      ]);
    }

    return pagersHtml;
  }

  /* 初始化监听器 */
  initListeners() {
    /* 在这里的this是分页器对象 */
    // this.pagers.forEach((pager) => {
    //   // 希望事件处理函数中的this就是外层的分页器实例
    //   // 事件处理函数写为箭头函数（如果写为常规函数 则this为事件源）
    //   pager.onclick = (e) => {
    //     console.log(pager.innerText);
    //     let n = pager.innerText * 1;
    //     this.setCurrentPage(n);
    //   };
    // });

    /* 给按钮绑定事件监听器 */
    // this.btnFirst.onclick = (e) => {
    //   this.setCurrentPage(1);
    // };

    /*  */
    // this.btnLast.onclick = (e) => {
    //   this.setCurrentPage(this.totalPages);
    // };

    /*  */
    // this.btnPrev.onclick = (e) => {
    //   this.setCurrentPage(--this.currentPage);
    // };

    /*  */
    // this.btnNext.onclick = (e) => {
    //   this.setCurrentPage(++this.currentPage);
    // };

    /*  */
    // this.btnGo.onclick = (e) => {
    //   this.setCurrentPage(this.ipPage.value * 1);
    // };

    /* 事件委托（节约内存+便于管理+对抗内存泄露） */
    this.domRoot.onclick = (e) => {
      switch (true) {
        // 点击的末梢元素的类名中有pager=你点了页码
        case e.target.classList.contains("pager"):
          console.log(e.target.innerText);
          let n = e.target.innerText * 1;
          this.setCurrentPage(n);
          break;

        // btnFirst
        case e.target.id === "btnFirst":
          this.setCurrentPage(1);
          break;

        // btnLast
        case e.target.id === "btnLast":
          this.setCurrentPage(this.totalPages);
          break;

        // btnPrev
        case e.target.id === "btnPrev":
          this.setCurrentPage(-1, true);
          break;

        // btnNext
        case e.target.id === "btnNext":
          this.setCurrentPage(1, true);
          break;

        // btnGo
        case e.target.id === "btnGo":
          this.setCurrentPage(document.querySelector("#ipPage").value * 1);
          break;

        default:
          break;
      }
    };
  }

  /* 跳转目标页 */
  // useDelta为false时 n是页码
  // useDelta为true时 n是前进后后退的页数
  setCurrentPage(n, useDelta = false) {
    console.log("setCurrentPage", n);

    // 如果使用delta模式 传入-3 当前页码5 则5+(-3)代表用户想跳转第2页
    if (useDelta) {
      n = this.currentPage + n;
    }

    /* 保证页码合法 才会重新设置页码+重绘 */
    if (n >= 1 && n <= this.totalPages) {
      this.currentPage = n;

      // 设置高亮页码
      this.render();

      this.callback(n);
    }
  }
  
}
